<script setup>
/**
 * & 文件引入区域
 */
import { useIndexStore } from "@/stores/indexStore";
import { useRouter } from "vue-router";

/**
 * & 注册区
 */
defineProps(["bg", "isMoreBtn", "title", "isComToCol"]);
defineEmits(["AddComToColFun", "UnComColFun"]);

/**
 * & 变量声明区
 */
const router = useRouter();

/**
 * & 函数区
 */
const backFun = () => {
  router.back();
};
</script>

<template>
  <!-- 
    bg: 背景颜色，不写默认不设置
    isMoreBtn: 是否显示“收藏”按钮，不写默认不显示
    title: 标题，不写默认不设置
    isComToCol: 用户是否收藏
   -->
  <div class="pageTop" :style="{ background: bg }">
    <img
      src="/images/Home/backBtn.png"
      alt=""
      :class="['backBtn', useIndexStore().isRtl ? 'trun_180' : '']"
      @click="backFun"
    />

    <div class="title" v-if="title">{{ title }}</div>

    <div class="btn">
      <!-- 插槽入口 -->
      <slot />

      <img
        src="/images/Home/collection.png"
        alt=""
        class="moreBtn"
        v-if="isMoreBtn && !isComToCol"
        @click="$emit('AddComToColFun')"
      />
      <img
        src="/images/Home/collections.png"
        alt=""
        class="moreBtn"
        v-if="isMoreBtn && isComToCol"
        @click="$emit('UnComColFun')"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pageTop {
  padding: 10rem 18rem 6rem 16rem;

  display: flex;
  justify-content: space-between;

  .title {
    font-size: 20rem;
    font-weight: 500;
    line-height: 28rem;
    color: #666;
  }

  .backBtn {
    width: 24rem;
  }

  .moreBtn {
    width: 24rem;
  }
}
</style>
